<template>
    <!-- 修改用户的对话框 -->
    <!-- :visible.sync="editDialogVisible" -->
    <!-- :visible="editDialogVisible" -->
    <!-- @update:visible="editDialogVisible=$event" -->
    <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%">
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px"
      >
        <el-form-item label="用户名">
          <el-input disabled v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
  
        <!-- http-request 发送文件上传请求 -->
        <el-form-item label="头像">
          <el-upload
            action="#"
            class="avatar-uploader"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :http-request="uploadImage"
          >
            <i v-if="!editForm.avatar" class="el-icon-plus"></i>
            <img v-else class="avatar" :src="editForm.avatar" alt="" />
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </template>
  
  <script type="text/javascript">
  import { uploadFile } from "@/api/file";
  
  export default {
    data() {
      return {
        //  对话框的显示和隐藏   默认先展示出来
        editDialogVisible: false,
        editForm: {
          mobile: "",
          email: "",
          avatar: "",
        },
        editFormRules: {},
       
      };
    },
    props: {
      item: {
        type: Object,
        default: () => ({}),
      },
    },
    methods: {
      show() {
        // 根据用户的id  发送数据请求
        //   {}
        this.editForm = JSON.parse(JSON.stringify(this.item));
       
        this.editDialogVisible = true;
      },
      // 图片上传之前除了
      beforeAvatarUpload(file) {
        // console.log(file)
        const imgType = ["image/png", "image/jpeg", "image/gif"];
        const isimg = imgType.includes(file.type);
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isimg) {
          this.$message.error("上传头像图片只能是 JPG、PNG、GIF 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isimg && isLt2M;
      },
      async uploadImage(params) {
        // 1 上传文件需要先拿到文件对象
        // 1.1 params.file 就是我们要上传的文件信息
        console.log(params.file);
        // 发送请求就是为了拿到头像的在线资源地址
  
        // 2 创建上传文件fd对象
        let fd = new FormData();
        // 把上传的文件追加到fd里面
        // 第一个参数接口文档中要求的 file 字段
        // 第2个参数 就是上传的文件信息
        fd.append("file", params.file);
        // fd=== {file: 上传的文件信息 }
  
        const res = await uploadFile(fd);
        console.log(res);
  // res.data.url  在线的连接
        this.editForm.avatar = res.data.url
      },
    },
  };
  </script>
  
  <style  scoped   lang="scss">
  .avatar-uploader {
    width: 130px;
    height: 130px;
    border: 1px solid #dcdfe6;
    position: relative;
    .el-icon-plus {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 22px;
      transform: translate(-50%, -50%);
    }
  
    .avatar {
      width: 130px;
      height: 130px;
    }
  }
  </style>
  